<template>
  <div class="bigcustomerorderlist-wrapper">
      <BaseFilter class="base-filter" :config="filterOptions" @mychange="setFilterData" />
      <div class="table-wrapper">
        <BaseTable :columns="tableColumns" :tableData="getTableData()">
            <template #header>
                <div class="header-btn">
                    <el-button type="primary" @click="exportXLSXFile()">导出excel</el-button>
                    <el-button type="primary">查询</el-button>
                    <el-button type="primary">重置</el-button>
                </div>
            </template>
        </BaseTable>
      </div>
  </div>
</template>

<script>
import BaseFilter from "@/components/BaseFilter.vue";
import BaseTable from "@/components/BaseTable.vue";
import { getOrderList } from "@/api/bigCustomer";
import moment from "moment";
import XLSX from "xlsx";
export default {
    name: "bigcustomerorderlist",
    components: {
        BaseFilter,
        BaseTable
    },
    data(){
        return {
            date: null,
            filterOptions: [
                {
                    label: "订单编号",
                    key: "order_number",
                    type: "text",
                    props: {
                        placeholder: "订单编号"
                    },
                },
                {
                    label: "客户姓名",
                    key: "name",
                    type: "text",
                    props: {
                        placeholder: "客户姓名"
                    },
                },
                {
                    label: "单位",
                    key: "company",
                    type: "text",
                    props: {
                        placeholder: "单位"
                    }
                },
                {
                    label: "订单日期",
                    key: "create_time",
                    type: "datepicker",
                    props: {
                        type: "daterange",
                        rangeSeparator: "-",
                        startPlaceholder: "开始日期",
                        endPlaceholder: "结束日期"
                    },
                },
            ],
            filterData: {},
            tableColumns: [
                {
                    title: "订单编号",
                    key: "order_number",
                },
                {
                    title: "单位",
                    key: "company",
                },
                {
                    title: "姓名",
                    key: "name",
                },
                {
                    title: "客户级别",
                    key: "type",
                },
                {
                    title: "创建时间",
                    key: "create_time",
                },
                {
                    title: "产品类型",
                    key: "product_name",
                },
                {
                    title: "数量",
                    key: "order_quantity",
                },
                {
                    title: "支付状态",
                    key: "pay_status",
                },
                {
                    title: "审核状态",
                    key: "order_status",
                },
                {
                    title: "配送方式",
                    key: "online",
                    
                }
            ],
            tableData: [],
        }
    },
    methods: {
        setFilterData(values){
            this.filterData = values;
        },
        
        getOrderList(){
            getOrderList().then(res => {
                if(res.code === 200){
                    this.tableData = (res.data || []).map(item => {
                        return {
                            ...item,
                            create_time: moment(item?.create_time).format("YYYY-MM-DD HH:mm:ss"),
                            pay_status: item.pay_status === 1 ? "已支付" : "未支付",
                            order_status: item.order_status === 1 ? "审核通过" : "审核未通过",
                            online: item.online === "1" ? "线下" : "线上"
                        }
                    })
                }
                this.$message.error("加载数据失败");
            }).catch(err => {
                this.$message.error("加载数据失败");
            })
        },
        getTableData(){
            console.log("执行")
            let data = this.tableData;
            const base = this.filterData;
            const keys = Object.keys(base);
            for(let idx = 0; idx < keys.length; idx++){
                let key = keys[idx];
                if(!base?.[key] || key === "create_time") continue;
                data = data.filter(item => item?.[key].includes(base[key]));
                
            }
            return data;
        },
        exportXLSXFile() {
            if(this.tableData.length == 0) {
                this.$message.warn("当前数据列表为空");
                return
            }
            const head = this.tableColumns.map(item => {
                return item.title;
            })
            const data = this.tableData.map(item => {
                return this.tableColumns.map(fi => {
                    return item?.[fi.key];
                })
            })
            const ws_name = "Sheet1";
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.aoa_to_sheet([head, ...data]);
            XLSX.utils.book_append_sheet(wb, ws, ws_name);
            XLSX.writeFile(wb, "订单数据.xlsx");
        }
    },
    mounted(){
        this.getOrderList();
    }
}
</script>

<style lang="scss">
.bigcustomerorderlist-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
    .table-wrapper {
        margin-top: 20px;
    }
}
</style>